<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>滴答办公系统-员工新增</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="media/layui/css/layui.css" media="all">
  </head>
  <body>
    <div class="layui-container" style="margin-top: 5px">
      <form class="layui-form" action="staffadd.do" method="post">
        <div class="layui-form-item">
          <label class="layui-form-label">员工帐号</label>
          <div class="layui-input-block">
            <input type="text" name="no" lay-verify="name" autocomplete="off" placeholder="请输入帐号" id="no" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">员工姓名</label>
          <div class="layui-input-block">
            <input type="text" name="name" lay-verify="name" autocomplete="off" placeholder="请输入姓名" id="name" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
        	<label class="layui-form-label">密码</label>
        	<div class="layui-input-block">
        	 <input type="password" id="pass" name="password" class="layui-input">
        	</div>
        </div>
        <div class="layui-form-item">
        	<label class="layui-form-label">确认密码</label>
        	<div class="layui-input-block">
              <input type="password" id="passVerify" name="password" class="layui-input">
        	</div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">所属部门</label>
          <div class="layui-input-block">
            <select name="did" id="cds">
              <option value="-1">--请选择部门--</option>
            </select>
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">性别</label>
          <div class="layui-input-block">
            <input type="radio" name="sex" value="男" title="男" checked>
            <input type="radio" name="sex" value="女" title="女">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">邮箱</label>
          <div class="layui-input-inline">
            <input type="text" name="email" id="email" lay-verify="required" placeholder="请输入有效邮箱" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">手机号</label>
          <div class="layui-input-inline">
            <input type="text" name="phone" id="phone" lay-verify="required" placeholder="请输入手机号" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">QQ</label>
          <div class="layui-input-inline">
            <input type="text" name="qq" id="qq" lay-verify="required" placeholder="请输入QQ号码" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">入职日期</label>
          <div class="layui-input-inline">
            <input type="text" name="createdate" id="date" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">照片</label>
          <button type="button" class="layui-btn" id="upfile">
            <i class="layui-icon">&#xe67c;</i>上传图片
          </button>
          <div class="layui-input-block" style="margin-top: 15px;">
            <span id="img0">用户个性头像</span>
            <img alt="用户个性头像" id="img1" width="60%" style="display: none;">
          </div>
        </div>
        <div class="layui-form-item">
          <input class="layui-btn" style="margin-left: 10%" onclick="addEmp()" value="确认新增">
        </div>
      </form>
    </div>
    
    <script type="text/javascript" src="media/js/jquery.min.js"></script>

    <script src="media/layui/layui.js"></script>
    <!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
    <script>
      var picture = "";
      layui.use(['jquery', 'form', 'upload', 'layedit', 'laydate'], function() {
      var form = layui.form, layer = layui.layer, layedit = layui.layedit, laydate = layui.laydate;
      var $ = layui.$, upload = layui.upload;

      //执行实例
      var uploadInst = upload.render({
        elem: '#upfile' //绑定元素
        ,url: '/emp/emp/uploadEmpPhoto'//上传接口
        ,multiple: false 
        ,done: function(obj) {
          //上传完毕回调
          // console.log(obj);
          picture = obj.photo;
          var imgSrc = "/emp/upload/userHeadPhoto/" + obj.photo;
          $("#img1")[0].src = imgSrc;
          
          $("#img0").css('display','none');
          $("#img1").css('display','block');
        },
        error: function() {
          //请求异常回调
        }
      });
      //日期
      laydate.render({
        elem: '#date'
      });


      //自定义验证规则
      form.verify({
        title: function(value) {
          if (value.length < 5) {
            return '标题至少得5个字符啊';
          }
        },
        pass: [/(.+){6,12}$/, '密码必须6到12位'],
        content: function(value) {
          layedit.sync(editIndex);
        }
      });
      
      function init() {
        $.ajax({
          url: "/emp/depart/getAllDeparts",
          type: "POST",
          dataType: "json",
          data: {}, //提交表单的数据
          success: function(res) {
            var options = "<option value=\"-1\">--请选择部门--</option>";
           for(var i = 0; i < res.departsList.length; i++) {
             options += "<option value='" + res.departsList[i].id + "'>" + res.departsList[i].name + "</option>";
           }
           $('#cds').empty();
           $("#cds").append(options);
           
           form.render();
          },
          error: function(XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest.status);
            alert(XMLHttpRequest.readyState);
            alert(textStatus);
          }
        });
      }
      init();
    });
    
    function addEmp() {
      var no = $('#no').val();
      var pass = $('#pass').val();
      var passVerify = $('#passVerify').val();
      var name = $('#name').val();
      var did = $('#cds').val();
      var flag = 1;
      var sex = $('input[name="sex"]:checked').val();
      var email = $('#email').val();
      var qq = $('#qq').val();
      var phone = $('#phone').val();
      var createdate = $('#date').val();
      var photo = picture;
      
      if(no != "" && pass != "" && passVerify != "" && name != "" && did != -1 && email != "" && qq != "" && phone != "" && createdate != "" && photo != "") {
        if(pass == passVerify) {
          $.ajax({
            url: "/emp/emp/addEmp",
            type: "POST",
            dataType: "json",
            data: {
              no: no,
              pass: pass,
              name: name,
              did: did,
              flag: flag,
              sex: sex,
              email: email,
              qq: qq,
              phone: phone,
              createdate: createdate,
              photo: photo
            }, //提交表单的数据
            success: function(res) {
              window.location.reload();
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
              alert(XMLHttpRequest.status);
              alert(XMLHttpRequest.readyState);
              alert(textStatus);
            }
          });
        }else{
          alert("两次输入密码不一致！");
        }
      }else{
        alert("请完善员工信息！");
      }
    } 
    </script>
  </body>
</html>
